<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/back_css/public.css" th:href="@{/back_css/public.css}" media="all" />
    <link rel="stylesheet" href="../../../static/back_css/data_statistics.css" th:href="@{/back_css/data_statistics.css}" media="all" />
</head>
<body>
<div id="main">
    <div class="container">

        <div class="container_top_bottom">
            <ul>
                <li>
                    <input type="text" id="searchVal" placeholder="请输入关键字">
                    <a href=""><i class="layui-icon layui-icon-search search_btn" ></i>  </a>
                </li>
                <li>
                            <div class="layui-input-inline">
                                <select id="DISTRICT_ID" name="quiz3" lay-verify="required">
                                    <option value="">请选择所属地区</option>
                                    <option th:each="districtLists:${districtLists}" th:value="${districtLists.ID}"><span
                                            th:text="${districtLists.DISTRICT_NAME}"></span></option>
                                </select>
                            </div>
                </li>
            </ul>
        </div>
        <div class="container_center" >
            <table class="layui-hide" id="test"></table>
            <table class="lalayui-hide" id="test1"></table>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>
<!--<script type="text/javascript" src="../../../static/plugin/layui/test1.js" th:src="@{/plugin/layui/test1.js}"></script>-->
<script>
    layui.use(['table','element'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var element = layui.element;
        table_render('/getUserRegInfo')
        function table_render(url) {
            table.render({
                elem: '#test'
                , even: "true"
                , width: 960
                ,url:url
                // ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , page: true
                , limit: 15
                , limits: [10, 15, 20, 25]
                ,id: "worksListTable"
                , cols: [
                    [

                    {field: 'user_NAME', width: 110, title: '真实姓名'}
                    , {field: 'votesnum', width: 98, title: '票数', sort: true}
                    , {field: 'age', width: 70, title: '年龄', sort: true}
                    , {field: 'district_NAME', title: '所属地点', width: 150} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'company', title: '所属单位', width: '20%', minWidth: 100}
                    , {field: 'telephone', title: '联系电话', width: 130}
                    , {field: 'sign_TIME', title: '参与时间', width: 130}
                ]
                ]

            });
        }

        $(".search_btn").on("click", function () {
            //if ($(".searchVal").val() != '') {
            table.reload("worksListTable", {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    USER_NAME: $("#searchVal").val(),//搜索的关键字
                    DISTRICT_ID: $("#DISTRICT_ID").val()//地址ID
                }
            })

            // } else {
            //     layer.msg("请输入搜索的内容");
            // }
            return false;
        });

        $("#peoplenum").on("click",function () {
            $("div[lay-id=test]").css("display","block");
            $("div[lay-id=test1]").css("display","none");
            $("#peoplenum").css("border-bottom","1px solid #fec100");
            $("#worksnum").css("border-bottom","none");
        });
        $("#worksnum").on("click",function () {
            $("div[lay-id=test1]").css("display","block");
            $("div[lay-id=test]").css("display","none");
            $("#worksnum").css("border-bottom","1px solid #fec100");
            $("#peoplenum").css("border-bottom","none");
        })
    });

</script>
</body>
</html>